<template>
  <div class="settings-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>系统设置</span>
          <el-button type="primary" @click="handleSave">
            <el-icon><Check /></el-icon>保存设置
          </el-button>
        </div>
      </template>

      <el-tabs v-model="activeTab">
        <!-- 基本设置 -->
        <el-tab-pane label="基本设置" name="basic">
          <el-form
            ref="basicFormRef"
            :model="basicForm"
            :rules="basicRules"
            label-width="120px"
          >
            <el-form-item label="系统名称" prop="systemName">
              <el-input v-model="basicForm.systemName" placeholder="请输入系统名称" />
            </el-form-item>
            <el-form-item label="系统描述" prop="description">
              <el-input
                v-model="basicForm.description"
                type="textarea"
                placeholder="请输入系统描述"
              />
            </el-form-item>
            <el-form-item label="时区" prop="timezone">
              <el-select v-model="basicForm.timezone" placeholder="请选择时区">
                <el-option label="UTC+8 (中国标准时间)" value="Asia/Shanghai" />
                <el-option label="UTC+0 (格林威治时间)" value="UTC" />
                <el-option label="UTC-5 (美国东部时间)" value="America/New_York" />
              </el-select>
            </el-form-item>
            <el-form-item label="语言" prop="language">
              <el-select v-model="basicForm.language" placeholder="请选择语言">
                <el-option label="简体中文" value="zh-CN" />
                <el-option label="English" value="en-US" />
              </el-select>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 安全设置 -->
        <el-tab-pane label="安全设置" name="security">
          <el-form
            ref="securityFormRef"
            :model="securityForm"
            :rules="securityRules"
            label-width="120px"
          >
            <el-form-item label="密码策略" prop="passwordPolicy">
              <el-checkbox-group v-model="securityForm.passwordPolicy">
                <el-checkbox label="uppercase">必须包含大写字母</el-checkbox>
                <el-checkbox label="lowercase">必须包含小写字母</el-checkbox>
                <el-checkbox label="number">必须包含数字</el-checkbox>
                <el-checkbox label="special">必须包含特殊字符</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="密码最小长度" prop="minPasswordLength">
              <el-input-number
                v-model="securityForm.minPasswordLength"
                :min="6"
                :max="20"
              />
            </el-form-item>
            <el-form-item label="密码有效期" prop="passwordExpiry">
              <el-input-number
                v-model="securityForm.passwordExpiry"
                :min="0"
                :max="365"
              />
              <span class="unit">天（0表示永不过期）</span>
            </el-form-item>
            <el-form-item label="登录失败锁定" prop="loginLock">
              <el-switch v-model="securityForm.loginLock" />
              <template v-if="securityForm.loginLock">
                <el-input-number
                  v-model="securityForm.maxLoginAttempts"
                  :min="3"
                  :max="10"
                  class="ml-2"
                />
                <span class="unit">次失败后锁定</span>
                <el-input-number
                  v-model="securityForm.lockDuration"
                  :min="5"
                  :max="60"
                  class="ml-2"
                />
                <span class="unit">分钟</span>
              </template>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 通知设置 -->
        <el-tab-pane label="通知设置" name="notification">
          <el-form
            ref="notificationFormRef"
            :model="notificationForm"
            label-width="120px"
          >
            <el-form-item label="邮件通知" prop="emailNotification">
              <el-switch v-model="notificationForm.emailNotification" />
            </el-form-item>
            <template v-if="notificationForm.emailNotification">
              <el-form-item label="SMTP服务器" prop="smtpServer">
                <el-input v-model="notificationForm.smtpServer" placeholder="请输入SMTP服务器地址" />
              </el-form-item>
              <el-form-item label="SMTP端口" prop="smtpPort">
                <el-input-number v-model="notificationForm.smtpPort" :min="1" :max="65535" />
              </el-form-item>
              <el-form-item label="发件人邮箱" prop="senderEmail">
                <el-input v-model="notificationForm.senderEmail" placeholder="请输入发件人邮箱" />
              </el-form-item>
              <el-form-item label="邮箱密码" prop="emailPassword">
                <el-input
                  v-model="notificationForm.emailPassword"
                  type="password"
                  placeholder="请输入邮箱密码"
                  show-password
                />
              </el-form-item>
            </template>
            <el-form-item label="系统通知" prop="systemNotification">
              <el-checkbox-group v-model="notificationForm.systemNotification">
                <el-checkbox label="login">登录通知</el-checkbox>
                <el-checkbox label="error">错误通知</el-checkbox>
                <el-checkbox label="backup">备份通知</el-checkbox>
                <el-checkbox label="update">更新通知</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Check } from '@element-plus/icons-vue'

const activeTab = ref('basic')

const basicFormRef = ref(null)
const securityFormRef = ref(null)
const notificationFormRef = ref(null)

const basicForm = reactive({
  systemName: '数据库管理系统',
  description: '一个功能强大的数据库管理平台',
  timezone: 'Asia/Shanghai',
  language: 'zh-CN'
})

const securityForm = reactive({
  passwordPolicy: ['uppercase', 'lowercase', 'number'],
  minPasswordLength: 8,
  passwordExpiry: 90,
  loginLock: true,
  maxLoginAttempts: 5,
  lockDuration: 30
})

const notificationForm = reactive({
  emailNotification: false,
  smtpServer: '',
  smtpPort: 587,
  senderEmail: '',
  emailPassword: '',
  systemNotification: ['login', 'error', 'backup']
})

const basicRules = {
  systemName: [
    { required: true, message: '请输入系统名称', trigger: 'blur' }
  ],
  timezone: [
    { required: true, message: '请选择时区', trigger: 'change' }
  ],
  language: [
    { required: true, message: '请选择语言', trigger: 'change' }
  ]
}

const securityRules = {
  passwordPolicy: [
    { required: true, message: '请选择密码策略', trigger: 'change' }
  ],
  minPasswordLength: [
    { required: true, message: '请输入密码最小长度', trigger: 'blur' }
  ]
}

const handleSave = async () => {
  try {
    // 根据当前激活的标签页验证对应的表单
    if (activeTab.value === 'basic') {
      await basicFormRef.value.validate()
    } else if (activeTab.value === 'security') {
      await securityFormRef.value.validate()
    } else if (activeTab.value === 'notification') {
      await notificationFormRef.value.validate()
    }
    
    ElMessage.success('设置保存成功')
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}
</script>

<style scoped>
.settings-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.unit {
  margin-left: 8px;
  color: var(--el-text-color-secondary);
}

:deep(.el-form-item) {
  margin-bottom: 22px;
}

:deep(.el-checkbox-group) {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
</style> 